<template>
	<view class="edit_user_info PF-R uni-white-bg">
		<!-- 如果是订单那里过来的就传递过来订单列表信息 -->
		<!-- 头像信息 -->
		<view class="avatar" @click="avatarUpload">
			<image :src="form.avatar" v-if="form.avatar" class="img"></image>
			<image v-else class="img" src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/default.png">
			</image>
		</view>
		<view class="student-info  disp flex-col center ">
			<view class="title basic-label PF-M uni-pt-20 box_search">学员信息</view>
			<view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<text class="basic-label fs24 f2450">*</text>
					<text>姓名</text>
				</view>
				<view class="input_box disp center">
					<uni-easyinput v-model="form.realName" placeholder="请输入学员姓名" class="flex1 input_bgs" clearable />
				</view>
			</view>
			<view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<text class="basic-label fs24 f2450">*</text>
					<text>性别</text>
				</view>
				<view class="input_box disp center between">
					<uni-data-select v-model="form.sex" :localdata="sexList" @change="sexSelect"
						style="width: 100%;"></uni-data-select>
				</view>
			</view>

			<view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<text class="basic-label fs24 f2450">*</text>
					<text>身份证</text>
				</view>
				<view class="input_box disp center">
					<uni-easyinput v-model="form.idCard" placeholder="请输入学员身份证号码" class="flex1 input_bgs" clearable
						@blur="idCardChange" />
				</view>
			</view>
			<!-- <view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<text class="basic-label fs24 f2450">*</text>
					<text>手机号码</text>
				</view>
				<view class="input_box disp center">
					<uni-easyinput v-model="form.phone" placeholder="请输入学员手机号码" class="flex1 input_bgs" clearable />
				</view>
			</view> -->
			<!-- <view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<text class="basic-label fs24 f2450">*</text>
					<text>紧急联系方式</text>
				</view>
				<view class="input_box disp center">
					<uni-easyinput v-model="form.exigencyPhone" placeholder="请输入学员紧急联系方式" class="flex1 input_bgs"
						clearable />
				</view>
			</view> -->

			<view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<text class="basic-label fs24 f2450">*</text>
					<text>年龄</text>
				</view>
				<view class="input_box disp center">
					<uni-easyinput v-model="form.age" placeholder="请输入身份证号码" disabled class="flex1 input_bgs"
						clearable />
				</view>
			</view>

			<view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<text class="basic-label fs24 f2450">*</text>
					<text>出生年月</text>
				</view>
				<view class="input_box disp center between">
					<uni-datetime-picker type="date" v-model="form.birthday" disabled>
					</uni-datetime-picker>
					<image src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/date_icon.png"
						mode="widthFix" class="icon_size"></image>
				</view>
			</view>

			<view class="box_search uni-mt-16" @click="openLocation">
				<view class="name_label basic-label fs24 ">
					<text class="basic-label fs24 f2450">*</text>
					<text>详细地址</text>
				</view>
				<view class="input_box disp center between">
					<uni-easyinput v-model="form.address" :disabled="true" placeholder="请选择地址" class="flex1 input_bgs"
						clearable />
					<image src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/address-icon.png"
						mode="widthFix" class="icon_size"></image>
				</view>
			</view>

			<view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<text class="basic-label fs24 f2450">*</text>
					<text>身高(cm)</text>
				</view>
				<view class="input_box disp center">
					<uni-easyinput type="number" v-model="form.height" placeholder="请输入身高(cm)" class="flex1 input_bgs"
						clearable />
				</view>
			</view>

			<view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<text class="basic-label fs24 f2450">*</text>
					<text>体重(kg)</text>
				</view>
				<view class="input_box disp center">
					<uni-easyinput type="number" v-model="form.weight" placeholder="请输入体重(kg)" class="flex1 input_bgs"
						clearable />
				</view>
			</view>

			<view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<text class="basic-label fs24 f2450">*</text>
					<text>身体状况及其余备注事项(以上情况属实，如因隐瞒、误报所产生的后果，乙方需付相应的法律责任！)</text>
				</view>
				<view class="input_box_area disp center">
					<uni-easyinput type="textarea" v-model="form.bodyCondition" placeholder="请输入身体状况及其余备注事项"
						class="flex1 input_bgs" clearable />
				</view>
			</view>

			<view class="title basic-label PF-M uni-pt-20 box_search">家长信息</view>
			
			<view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<text class="basic-label fs24 f2450">*</text>
					<text>母亲姓名</text>
				</view>
				<view class="input_box disp center">
					<uni-easyinput v-model="form.motherName" placeholder="请输入母亲姓名" class="flex1 input_bgs" clearable />
				</view>
			</view>
			<view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<text class="basic-label fs24 f2450">*</text>
					<text>母亲手机号</text>
				</view>
				<view class="input_box disp center">
					<uni-easyinput v-model="form.motherPhone" placeholder="请输入母亲手机号" class="flex1 input_bgs"
						clearable />
				</view>
			</view>
			
			<view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<!-- <text class="basic-label fs24 f2450">*</text> -->
					<text>父亲姓名</text>
				</view>
				<view class="input_box disp center">
					<uni-easyinput v-model="form.fatherName" placeholder="请输入父亲姓名" class="flex1 input_bgs" clearable />
				</view>
			</view>
			<view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<!-- <text class="basic-label fs24 f2450">*</text> -->
					<text>父亲手机号</text>
				</view>
				<view class="input_box disp center">
					<uni-easyinput v-model="form.fatherPhone" placeholder="请输入父亲手机号" class="flex1 input_bgs"
						clearable />
				</view>
			</view>
			

			<view class="box_search uni-mt-16">
				<view class="name_label basic-label fs24 ">
					<text>活动期望</text>
				</view>
				<view class="input_box_area disp center">
					<uni-easyinput type="textarea" v-model="form.hope" placeholder="请输入活动期望" class="flex1 input_bgs"
						clearable />
				</view>
			</view>
		</view>

		<button class="sign-btn btn_grand grand" @click="sumbmit">填写完成</button>
	</view>
</template>

<script>
	import orderItem from '../components/order_item'
	import uniEasyinput from "@/pages/students/components/uni-easyinput/uni-easyinput"
	import uniDatetimePicker from "@/pages/students/components/uni-datetime-picker/uni-datetime-picker"
	import {
		getArticleHotList,
		getArticleBannerList
	} from "@/api/api.js";
	import {
		uploadFiles
	} from "@/utils/index.js";
	//uniform 单独在students包中使用，分包限制在2M 单独引入组件
	export default {
		components: {
			orderItem,
			uniEasyinput,
			uniDatetimePicker
		},
		data() {
			return {
				selectShow: false,
				dateShow: false,
				sexList: [{
						value: 1,
						text: '男'
					},
					{
						value: 2,
						text: '女'
					}
				],
				form: {
					avatar: '',
					realName: '',
					sex: "",
					sexName: "",
					idCard: '',
					birthday: '',
					address: '',
					height: '',
					weight: '',
					bodyCondition: '',
					fatherName: '',
					fatherPhone: '',
					motherName: '',
					motherPhone: '',
					hope: '',
					//省市区
					province: "",
					city: "",
					area: "",
					exigencyPhone: "",
					phone: ""
				},
				localData: []
			}
		},
		onLoad(op) {
			// 省市区数据树生成
			if (op.stuId) {
				this.getStuInfo(op.stuId);
			}
		},
		methods: {
			//选择定位
			openLocation() {
				let that = this;
				console.log("uni.chooseLocation");
				uni.chooseLocation({
					success: function(res) {
						//详细地址
						that.form.address = res.address
						that.userInfo.lng = res.longitude
						that.userInfo.lat = res.latitude
					}
				});
			},

			//根据身份证号码获取生日+年龄
			idCardChange({
				detail
			}) {
				let idCard = detail.value
				var birthdate = idCard.match(/^\d{6}(\d{4})(\d{2})(\d{2})\d{3}[\dxX]$/); // 通过正则表达式提取出生日期部分
				if (birthdate && birthdate[1] !== undefined) {
					this.form.birthday = `${birthdate[1]}-${birthdate[2]}-${birthdate[3]}`;
					const birthYear = idCard.substring(6, 10);
					const currentYear = new Date().getFullYear();
					const age = currentYear - parseInt(birthYear);
					this.form.age = age;
				} else {
					this.m_toast("未校验到出生年月信息，请检查身份证号码");
				}
			},

			//头像上传
			avatarUpload() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						that.m_show("加载中");
						uploadFiles(res.tempFilePaths[0]).then(back => {
							that.m_hide();
							that.form.avatar = back;
						})
					}
				});
			},

			//获取学生的基本信息
			getStuInfo(stuId) {
				this.m_show("加载中");
				getArticleBannerList(stuId).then(res => {
					this.form = res.data;
					this.m_hide();
				})
			},

			filter() {
				if (this.m_empty(this.form.realName)) {
					return this.m_toast("请填写学员真实姓名");
				}
				if (this.m_empty(this.form.sexName)) {
					return this.m_toast("请选择学员性别");
				}
				if (this.m_empty(this.form.idCard)) {
					return this.m_toast("请填写学员身份证号");
				}
				if (this.m_empty(this.form.birthday)) {
					return this.m_toast("请填写学员生日");
				}
				if (this.m_empty(this.form.address)) {
					return this.m_toast("请填写详细地址");
				}
				if (this.m_empty(this.form.height)) {
					return this.m_toast("请填写学员身高");
				}
				if (this.m_empty(this.form.height)) {
					return this.m_toast("请填写学员体重");
				}
				if (this.m_empty(this.form.bodyCondition)) {
					return this.m_toast("请填写学员身体状况");
				}
				// if (this.m_empty(this.form.fatherName)) {
				// 	return this.m_toast("请填写父亲姓名");
				// }
				// if (this.m_empty(this.form.fatherPhone)) {
				// 	return this.m_toast("请填写父亲电话");
				// }
				if (this.m_empty(this.form.motherName)) {
					return this.m_toast("请填写母亲姓名");
				}
				if (this.m_empty(this.form.motherPhone)) {
					return this.m_toast("请填写母亲电话");
				}
				// if (this.m_empty(this.form.phone)) {
				// 	return this.m_toast("请填写学员电话");
				// }
				// if (this.m_empty(this.form.exigencyPhone)) {
				// 	return this.m_toast("请填写紧急联络电话");
				// }
				return true;
			},

			sumbmit() {
				if (this.filter()) {
					this.m_show("提交中");
					getArticleHotList(this.form).then(res => {
						this.m_toast("添加成功");
						setTimeout(() => {
							this.backUrl(1);
						}, 1000)
					})
				}
			},

			// 整体选择完成以后
			onchange(e) {
				const value = e.detail.value
				this.form.province = value[0].text;
				this.form.city = value[1].text;
				this.form.area = value[2].text;
			},
			go() {},

			sexSelect(v) {
				this.form.sex = v;
				if (v == 1) {
					this.form.sexName = "男";
				} else {
					this.form.sexName = "女";
				}
			},





		}
	}
</script>

<style scoped lang="scss">
	.avatar {
		width: 150rpx;
		height: 150rpx;
		margin: 0 auto;
		border-radius: 50%;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.edit_user_info {
		padding-bottom: 50rpx;
		padding-top: 50rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.box_search {
		width: 96%;
	}

	.input_box {
		height: 80rpx;
		width: 100%;
		background-color: #F9F9F9;
		border-radius: 8rpx;
	}

	.input_box_area {
		width: 100%;
		background-color: #F9F9F9;
		border-radius: 8rpx;
	}


	.sign-btn {
		margin: 10%;
	}

	.student-info {
		padding-left: 20rpx;

		.title {
			font-size: 34rpx;
			font-weight: 600;
			margin-top: 20rpx;
		}
	}

	.container {
		padding: 30rpx;
		background-color: white;
		min-height: 100vh;

		.status {
			// padding: 20rpx 0 20rpx 30rpx;
			text-align: left;
			color: #FFAA5B;
			font-size: 32rpx;
		}
	}

	.icon_size {
		width: 48rpx;
		height: 48rpx;
	}
</style>